<template>
  <div class="app-container">
    <div class="header">
      <h2>应用权限配置 - {{ application.name }}</h2>
      <el-button type="primary" @click="savePermissions">保存权限配置</el-button>
      <el-button @click="$router.back()">返回</el-button>
    </div>

    <el-tabs v-model="activeTab">
      <!-- 菜单权限配置 -->
      <el-tab-pane label="菜单权限" name="menu">
        <el-tree
          ref="menuTree"
          :data="menuList"
          show-checkbox
          node-key="id"
          :default-checked-keys="checkedMenuIds"
          :props="menuProps"
          check-strictly
          @check="handleMenuCheck"
        >
          <template #default="{ node, data }">
            <span class="custom-tree-node">
              <span class="node-label">{{ node.label }}</span>
              <el-tag type="danger" v-if="data.type === 1" class="permission-tag">[接口权限]</el-tag>
              <el-tag type="success" v-else class="permission-tag">[菜单权限]</el-tag>
            </span>
          </template>
        </el-tree>
      </el-tab-pane>

      <!-- 角色权限配置 -->
      <el-tab-pane label="角色权限" name="role">
        <el-table
          :data="roles"
          border
          style="width: 100%">
          <el-table-column
            prop="name"
            label="角色名称"
            width="180">
          </el-table-column>
          <el-table-column
            prop="description"
            label="角色描述">
          </el-table-column>
          <el-table-column
            label="操作"
            width="180">
            <template v-slot:default="{row}">
              <el-switch
                v-model="row.has_permission"
                active-color="#13ce66"
                inactive-color="#ff4949"
                @change="handleRolePermissionChange(row)">
              </el-switch>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import api from '@/api/application'

export default {
  name: 'ApplicationPermissions',
  data() {
    return {
      activeTab: 'menu',
      appId: null,
      application: {},
      // 菜单权限相关
      menuList: [],
      checkedMenuIds: [],
      menuProps: {
        children: 'children',
        label: 'name'
      },
      // 角色权限相关
      roles: []
    }
  },
  created() {
    this.appId = this.$route.query.app_id
    if (this.appId) {
      this.fetchApplicationInfo()
      this.fetchMenuPermissions()
      this.fetchRolePermissions()
    }
  },
  methods: {
    fetchApplicationInfo() {
      api.info({ id: this.appId }).then(res => {
        this.application = res.data
      }).catch(() => {
        this.$message.error('获取应用信息失败')
      })
    },
    
    // 获取菜单权限列表
    fetchMenuPermissions() {
      // 这里应该调用获取菜单权限的API
      // 模拟数据
      this.menuList = [
        {
          id: 1,
          name: '商品管理',
          type: 0,
          children: [
            {
              id: 11,
              name: '商品列表',
              type: 0
            },
            {
              id: 12,
              name: '商品分类',
              type: 0
            }
          ]
        },
        {
          id: 2,
          name: '订单管理',
          type: 0,
          children: [
            {
              id: 21,
              name: '订单列表',
              type: 0
            }
          ]
        },
        {
          id: 3,
          name: '用户接口',
          type: 1
        }
      ]
      
      // 模拟已选中的菜单权限
      this.checkedMenuIds = [1, 11, 3]
    },
    
    // 获取角色权限列表
    fetchRolePermissions() {
      // 模拟角色数据
      this.roles = [
        {
          id: 1,
          name: '管理员',
          description: '系统管理员',
          has_permission: true
        },
        {
          id: 2,
          name: '运营人员',
          description: '运营管理',
          has_permission: false
        },
        {
          id: 3,
          name: '财务人员',
          description: '财务管理',
          has_permission: false
        }
      ]
    },
    
    // 菜单权限选中事件
    handleMenuCheck(data, checkedInfo) {
      // 实际项目中这里需要处理父子节点关联关系
      console.log('选中的菜单:', data, checkedInfo)
    },
    
    // 角色权限变更事件
    handleRolePermissionChange(row) {
      console.log('角色权限变更:', row)
    },
    
    // 保存权限配置
    savePermissions() {
      // 获取选中的菜单权限
      const checkedMenus = this.$refs.menuTree.getCheckedKeys()
      
      // 获取有权限的角色
      const permittedRoles = this.roles
        .filter(role => role.has_permission)
        .map(role => role.id)
      
      // 构造请求数据
      const requestData = {
        app_id: this.appId,
        menu_permissions: checkedMenus,
        role_permissions: permittedRoles
      }
      
      // 发送保存请求
      // 这里应该调用实际的API接口
      console.log('保存权限配置:', requestData)
      
      this.$message.success('权限配置保存成功')
    }
  }
}
</script>

<style scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.custom-tree-node {
  display: flex;
  align-items: center;
  white-space: nowrap;
  flex-wrap: nowrap;
}

.node-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 8px;
}

.permission-tag {
  flex-shrink: 0;
}
</style>